import {defineComponent, PropType} from "vue";
import {ElDescriptions, ElDescriptionsItem, ElTag} from "element-plus"
import type {Descriptions, DescriptionsTree} from "@/interfaces/components/Descriptions";
import {appStore} from "@/store/modules/app";
export default defineComponent({
    name: "CdlDescriptions",
    props: {
        title: {type: String, required: false},
        templateTree: {type: Object as PropType<DescriptionsTree<any>>, required: true},
        model: {type: Object as PropType<{[key: string]: any}>, required: true},
        border: {type: Boolean, required: false, default: false},
        column: {type: Number, required: false, default: 3},
        className: {type: String, required: false}
    },
    emits: ["close"],
    setup(props){
        const store = appStore()
        /**
         * 获取词典样式
         * @param key 词典key
         * @param val 词典值
         */
        function getDictStyle(key: string, val: string | number){
            if(!key) return val
            let data: any = null
            store.getDict(key).map((item: any) => {
                if(item.dictValue == val) data = item
            })
            return <ElTag type={data?.labelClass === "primary"? "": data?.labelClass}>
                {data?.dictLabel}
            </ElTag>
        }

        return () => <>
            <ElDescriptions title={props.title}
                            border={props.border}
                            column={props.column}
                            class={props.className}>
                {
                    props.templateTree.map((item: Descriptions<any>) =>{
                        return item.dict?
                            <ElDescriptionsItem label={item.label}
                                                min-width={item.minWidth || 100}
                                                v-slots={{default: ()=>
                                                        getDictStyle(item.dict!, props.model[item.prop || ""])}}>
                        </ElDescriptionsItem> : <ElDescriptionsItem label={item.label}
                                                                    width={item.width || 200}
                                                                    span={item.span}
                                                                    min-width={item.minWidth || 100}>
                            {item.slot? item.slot(item.prop? props.model[item.prop] : props.model)
                                : props.model[item.prop || ""]}
                        </ElDescriptionsItem>
                    })
                }
            </ElDescriptions>
        </>
    }
})
